<template>
  <el-dialog :title="dialogData.title"
             :visible.sync="dialogData.show"
             center
             @close="$emit('closedialog')">
    <el-form ref="ruleCustom"
             :model="form"
             :rules="ruleCustom"
             label-position="right"
             label-width="250px">
      <el-form-item label="医院名称："
                    prop="hospitalId">
        <el-select v-model="form.hospitalId"
                   filterable
                   remote
                   clearable
                   style="width: 50%"
                   :disabled='!!dialogData.info'
                   placeholder="请输入医院名称"
                   :remote-method="remoteMethod">
          <el-option v-for="item in options"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="平台账号："
                    prop="account">
        <el-input v-model="form.account"
                  maxlength="11"
                  auto-complete="new-account"
                  class="w-200"
                  placeholder="请输入平台账号"></el-input>
      </el-form-item>
      <el-form-item label="密码："
                    prop="password">
        <el-input type="password"
                  v-model="form.password"
                  auto-complete="new-password"
                  class="w-200"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="开通业务：">
        <el-checkbox-group v-model="businessList">
          <el-checkbox label="1">体检业务</el-checkbox>
          <el-checkbox label="2">快诊业务</el-checkbox>
          <el-checkbox label="3">远程胎心解读</el-checkbox>
          <el-checkbox label="4">远程心电解读</el-checkbox>
          <el-checkbox label="5">远程四高解读</el-checkbox>
          <el-checkbox label="6">专病、慢病签约</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="解读报告是否允许使用医院logo："
                    label-width="250px">
        <el-radio-group v-model="form.useLogo">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="报告后缀："
                    label-width="250px">
        <el-input v-model="form.description"
                  placeholder="非必填"
                  autocomplete="off"
                  style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="是否为风险筛查检测点："
                    label-width="250px">
        <el-radio-group v-model="form.isDetection">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="检测点设备配置："
                    v-if="form.isDetection == 1">
        <el-select v-model="form.goodsTypeIds"
                   multiple
                   placeholder="请选择检测点"
                   style="width:50%">
          <el-option v-for="item in apparatusList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作药店：">
        <el-select v-model="form.drugstoreIds"
                   multiple
                   filterable
                   placeholder="请选择合作药店"
                   style="width:50%">
          <el-option v-for="item in pharmacyList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
            <span class="fl">{{ item.name }}</span>
            <span class="fr"
                  style="color: #f78989">{{ item.address }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作诊所：">
        <el-select v-model="form.clinicIds"
                   multiple
                   filterable
                   placeholder="请选择合作诊所"
                   style="width:50%">
          <el-option v-for="item in clinicList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
            <span class="fl">{{ item.name }}</span>
            <span class="fr"
                  style="color: #f78989">{{ item.address }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <!--      新增慢病配置-->
      <div v-if="businessList.indexOf('6')!=-1">
        <el-row>
          <el-col :span="12">
            <el-form-item label="慢病包最低服务费-无合并症:" prop="lowestServicePrice">
              <el-input v-model="form.lowestServicePrice"
                        placeholder="请输入慢病包服务费">
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="慢病包最低服务费-有合并症:" prop="lowestComplicationServicePrice">
              <el-input v-model="form.lowestComplicationServicePrice"
                        placeholder="请输入慢病包服务费">
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="慢病包最低价格:" prop="lowestPrice">
              <el-input v-model="form.lowestPrice"
                        placeholder="请输入慢病包最低价格">
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="预付定金比例:" prop="depositRatio">
              <el-input v-model="form.depositRatio"
                        placeholder="请输入预付定金比例">
                <el-button slot="append">%</el-button>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="签约奖励比例:" prop="signRewardRatio">
              <el-input v-model="form.signRewardRatio"
                        placeholder="请输入签约奖励比例">
                <el-button slot="append">%</el-button>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="完成必测项目检查操作奖励比例:" prop="detectRewardRatio">
              <el-input v-model="form.detectRewardRatio"
                        placeholder="请输入完成操作奖励比例">
                <el-button slot="append">%</el-button>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="完成医生咨询比例:" prop="consultDoctorRatio">
              <el-input v-model="form.consultDoctorRatio"
                        placeholder="请输入完成医生咨询比例">
                <el-button slot="append">%</el-button>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="续签完成比例:" prop="renewalRewardRatio">
              <el-input v-model="form.renewalRewardRatio"
                        placeholder="请输入续签完成比例">
                <el-button slot="append">%</el-button>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="完成量表评测比例:" prop="scaleRewardRatio">
              <el-input v-model="form.scaleRewardRatio"
                        placeholder="请输入完成量表评测比例">
                <el-button slot="append">%</el-button>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="天下医生签单红包:" prop="txSignReward">
              <el-input v-model="form.txSignReward"
                        placeholder="请输入天下医生签单红包">
                <el-button slot="append">元</el-button>
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>



      </div>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="$emit('closedialog')">取 消</el-button>
      <el-button type="success"
                 @click="submitForm">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['dialogData', 'typeItems'],
  data() {
    const city = require('./citys.json');
    const validateAccount = (rule, value, callback) => {
      const telStr = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
      if (!(telStr.test(value))) {
        callback(new Error('请输入正确11位手机号码'));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      const telStr = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      if (!(telStr.test(value))) {
        callback(new Error('请输入8-16位数字字母组合密码'));
      } else {
        callback();
      }
    };
    return {
      clinicList: [],
      pharmacyList: [],
      apparatusList: [],
      businessList: [],
      form: {
        business: '',
        imageUrl: null,
        useLogo: 0,
        isDetection: 0,
        goodsTypeIds: [], // 检测点设备配置
        drugstoreIds: [], // 合作药店
        clinicIds: [], // 合作诊所
        emphasisHospital: 0
      },
      imageUploadUrl: this.api.hospitalManager.uploadImg,
      options: [],
      ruleCustom: {
        hospitalId: [
          {required: true, message: '请输入医院名称', type: 'number', trigger: 'change'}
        ],
        account: [
          {required: true, validator: validateAccount, trigger: 'blur'}
        ],
        password: [
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        lowestServicePrice: [{required: true, message: '请输入慢病包最低服务费', trigger: 'blur'}],
        lowestComplicationServicePrice: [{required: true, message: '请输入慢病包最低服务费', trigger: 'blur'}],
        lowestPrice: [{required: true, message: '请输入慢病包最低价格', trigger: 'blur'}],
        depositRatio: [{required: true, message: '请输入预付定金比例', trigger: 'blur'}],
        signRewardRatio: [{required: true, message: '请输入签约奖励比例', trigger: 'blur'}],
        detectRewardRatio: [{required: true, message: '请输入项目操作奖励比例', trigger: 'blur'}],
        consultDoctorRatio: [{required: true, message: '请输入完成医生自选奖励比例', trigger: 'blur'}],
        renewalRewardRatio: [{required: true, message: '请输入续约奖励比例', trigger: 'blur'}],
        txSignReward: [{required: true, message: '请输入天下医生签约奖励', trigger: 'blur'}],
        scaleRewardRatio: [{required: true, message: '请输入完成量表评测比例', trigger: 'blur'}],
      },
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleCustom.validate((valid) => {
        if (valid) {
          if (this.form.isDetection && !this.form.goodsTypeIds.length) {
            this.$message.warning('请选择检测点设备配置');
            return
          }
          this.form.business = this.businessList.join(',');
          this.post(this.api.cooperationHospital.uploadInfo, this.form).then(res => {
            if (res.data.code === '200') {
              this.$message.success('保存成功');
              this.$emit('closedialog');
              this.$parent._getList();
            }
          })
        }
      })

    },
    initTableData() {
      let param = {
        name: '',
        pageSize: 100,
        pageIndex: 0
      };
      this.post(this.api.apparatus.getApparatusList, param).then((res) => {
        if (res.data.code === '200') {
          this.apparatusList = res.data.object;
        }
      });
    },
    remoteMethod(val) {
      this.post(this.api.hospitalManager.list, {
        pageSize: 100,
        pageStart: 0,
        name: val
      }).then((res) => {
        if (res.data.code === '200') {
          this.options = res.data.object;
        }else {
          this.options=[]
        }
      });
    },
    getTypeList(type) {
      this.post(this.api.getCompanyList, {
        pageSize: 100,
        pageStart: 0,
        hospitalType: type
      }).then((res) => {
        if (res.data.code === '200') {
          if (type === 1) {
            this.pharmacyList = res.data.object;
          }
          if (type === 2) {
            this.clinicList = res.data.object;
          }
        }
      });
    },
  },
  created() {
    this.initTableData();
    this.getTypeList(1);
    this.getTypeList(2);
    if (this.dialogData.info) {
      this.post(this.api.cooperationHospital.hospitalDetail, {id: this.dialogData.info.id}).then(res => {
        if (res.data.code === '200') {
          let resData = res.data.object;
          this.form = resData;
          this.options = [{id: resData.hospitalId, name: resData.name}]; // 回显医院名称
          this.businessList = this.form.business.split(','); // 回显开通业务
        }
      })
    }
  }
};
</script>

<style scoped>
.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #606266;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
